<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view class="flex title justify-between" @click="() => (isCollapse = !isCollapse)">
					<text>任务信息</text>
					<u-icon v-show="!isCollapse && taskInfo?.id" name="arrow-up" color="#000a7b"></u-icon>
					<u-icon v-show="isCollapse && taskInfo?.id" name="arrow-down" color="#000a7b"></u-icon>
				</view>
				<view class="record-item" @click="() => (isCollapse = !isCollapse)">
					<text>{{ taskInfo.processingOrderNumber }}</text>
					<u-tag :text="useDictionaryStore().filterDictName('outboundStatus', taskInfo.taskStatus ?? '')" size="mini" :type="changeTypeColor(useDictionaryStore().filterDictName('outboundStatus', taskInfo.taskStatus ?? ''))"></u-tag>
				</view>
				<view v-show="!isCollapse && taskInfo?.id">
					<view class="record-item" v-show="taskInfo.processesClassification">
						<text>工序</text>
						<text>{{ useDictionaryStore().filterDictName('ProcessType', taskInfo.processesClassification ?? '') ?? '' }}</text>
					</view>
						<view class="record-item" v-show="taskInfo.figureNumber">
							<text>产品图号</text>
							<text>{{ taskInfo.figureNumber ?? '' }}</text>
						</view>
						<view class="record-item" v-show="taskInfo.materialName">
							<text>产品名称</text>
							<text>{{ taskInfo.materialName ?? '' }}</text>
						</view>
						<view class="record-item" v-show="taskInfo.equipName">
							<text>生产批次</text>
							<text>{{ taskInfo.equipName ?? '' }}</text>
						</view>
						<view class="record-item">
							<text>模数</text>
							<text>{{ taskInfo.mouldQuantity ?? '' }}</text>
						</view>
						<view class="record-item">
							<text>计划数量</text>
							<text>{{ taskInfo.planQuantity ?? '' }}</text>
						</view>
						<view class="record-item" v-if="taskInfo.locationName">
							<text>模具位置</text>
							<text>{{ taskInfo.locationName ?? '' }}</text>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script setup name="ConsumablesDetachInfo">
	import { useDictionaryStore } from "@/stores/useDictionaryStore";
const props = defineProps({
	taskInfo: {
		type: Object,
		default: () => {}
	}
});

const { taskInfo } = toRefs(props);

// 是否折叠
const isCollapse = ref(false);

function changeTypeColor (text) {
	if (text.includes('已')) {
		return 'success'
	} else {
		return 'primary'
	}
}
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
	
	.record-item {
		margin: 5px 0 !important;
		color: #333 !important;
		display: flex;
		align-items: end;
		font-size: 15px;

		> :first-child {
			min-width: 63px;
		}

		:deep(.u-tag__text--mini) {
			font-size: 13px;
			padding: 1px 3px 0;
		}
	}
	// .record-title {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	margin: 7px 0 3px 0;
	// 	color: #333 !important;
	// 	word-break: break-all;
	// }
}
.title {
	font-size: 16px;
	margin: 7px 0 10px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}

</style>
